<template>
    <div class="chart-main" style="width: 100%">
        <div class="chart" ref="chart" v-if="chartData.length > 0">
        </div>
    </div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line') // 折线图
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/visualMap')
require('echarts/lib/component/dataZoom')
export default {
    props: ['chartData'],
    computed: {
        chart() {
            return echarts.init(this.$refs.chart)
        },
        // 曲线数据
        chartVal() {
            let arr = this.chartData
            let arr2 = ''
            for (let i in arr) {
                arr2 = arr[0].startToReadTemp
            }
            return arr2.split(',')
        },
        // 记录时间
        tempTime() {
            let arr = this.chartData
            let recTime
            for (let i in arr) {
                recTime = this.$moment(arr[0].tempTime).format('X') // 记录时间转换unix时间
            }
            return recTime
        },
        // 记录间隔
        interval() {
            let arr = this.chartData
            for (let i in arr) {
                return arr[0].interval1 * 60 // 记录间隔转换
            }
        },
        // x时间轴
        xTime() {
            let arr = []
            let data = this.chartVal // 曲线数据
            let interval = Number(this.interval)
            let recTime = Number(this.tempTime)

            for (let i in data) {
                arr[i] = this.$moment.unix(recTime + i * interval).format('YYYY-MM-DD HH:mm:ss') // 计算每条记录的时间
            }
            return arr
        },
        // 最大温度+5度，最小温度-5度，用来做曲线y轴刻度值
        maxScale() {
            let arr = this.chartsData
            for (let i in arr) {
                return parseInt(arr[0].maxTemperature + 5)
            }
        },
        // 温度最小刻度
        minScale() {
            let arr = this.chartsData
            for (let i in arr) {
                return parseInt(arr[0].minTemperature - 5)
            }
        }
    },
    data() {
        return {
        }
    },
    methods: {
        drawLine() {
            let _this = this
            // 曲线数据
            let option = {
                title: {
                    // text: 'echarts图表'
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    top: '20',
                    bottom: '50',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis' // 鼠标放上去的提示内容，axis表示X轴
                },
                // 缩放
                dataZoom: [
                    {
                        type: 'inside',
                    },
                    {
                        show: true,
                        type: 'slider',
                        realtime: true, // 是否在拖拽时更新数据
                        borderColor: 'rgba(255,255,255,.3)',
                        // borderColor: '#f00',
                        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                        fillerColor: '#5cadff', // 选中范围颜色
                        height: 4,
                        handleSize: '300%', // 滑块大小
                        backgroundColor: '#9d9d9d', // 未选中区域颜色
                        fillerMode: 'filter',
                        handleStyle:{
                            color: '#fff',
                            borderColor: '#5cadff'
                        }
                        // y: '95%'
                    }
                ],
                // X轴数据
                xAxis: [
                    {
                        type: 'category',
                        data: this.xTime, // x轴时间
                        boundaryGap: false,
                        splitLine: {
                            show: true,
                            interval: 'auto',
                            lineStyle: {
                                color: 'rgba(30,30,30,.15)' // 图表竖线显示颜色
                            }
                        },
                        // 标尺颜色
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(30,30,30,.15)'
                            }
                        },
                        // 标尺文字
                        axisLabel: {
                            color: '#343434',
                            fontSize: 12,
                            margin: 15,
                            formatter:function(val){
                                let years = _this.$moment(val).format('YYYY-M-DD')
                                let time = _this.$moment(val).format('HH:mm')
                                return `${years}\n${time}`
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(30,30,30,.15)'
                            }
                        },
                        // 标尺颜色
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(30,30,30,.15)'
                            }
                        },
                        // 标尺文字
                        axisLabel: {
                            color: '#343434',
                            fontSize: 12
                        },
                        max: this.maxScale, // 最大刻度
                        min: this.minScale, // 最小刻度
                    }
                ],
                series: [
                    {
                        name: '温度',
                        scale: true, // 是否开启曲线
                        showSymbol: false,
                        symbolSize: 6,
                        type: 'line', // 类型 'line' 线性, 'bar' 饼图
                        data: this.chartVal, // 数据
                        itemStyle: {
                            normal: {
                                color: '#308e92' // 鼠标放上去的颜色
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 1.5, // 折线宽度
                                opacity: .85,
                                shadowColor: 'rgba(0, 0, 0, .5)', // 阴影颜色
                                shadowBlur: 10, // 阴影虚化尺寸
                                shadowOffsetX: 5, // 阴影右偏移
                                shadowOffsetY: 10, // 阴影下偏移
                                color: '#4a657a'
                            }
                        }
                    }
                ]
            }
            this.chart.setOption(option)
        }
    },
    mounted() {
        this.drawLine()
    }
}
</script>

<style>
.chart {
    width: 100%;
    height: 400px;
}
</style>
